<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div id="div_video" style="display: none;">
            <video class="input_video"></video>
        </div>
        <canvas class="output_canvas" width="1280px" height="720px"></canvas>
        <p id="output_text"></p>
        <canvas id="localcanvas" width="1920" height="1080"></canvas>
        <br />
        <button id="snapbtn">截取</button>
        <button id="hidebtn">隐藏</button>
    </div>
    <script type="module">
        const videoElement = document.getElementsByClassName('input_video')[0];
        const canvasElement = document.getElementsByClassName('output_canvas')[0];
        const canvasCtx = canvasElement.getContext('2d');
        const outputText = document.getElementById("output_text");

        var testvideo = document.getElementById("test");
        var snapbtn = document.getElementById("snapbtn");
        var hidebtn = document.getElementById("hidebtn");
        var canvas = document.getElementById("localcanvas");
        var ctx = canvas.getContext("2d");
        snapbtn.onclick = function () {
            ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        }
        // testvideo.style.display = 'none';
        hidebtn.onclick = function () {
        }

        function onResults(results) {
            canvasCtx.save();
            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
            canvasCtx.drawImage(
                results.image, 0, 0, canvasElement.width, canvasElement.height);
            if (results.multiHandLandmarks) {
                // console.log(results.multiHandLandmarks);
                outputText.innerHTML = JSON.stringify(results.multiHandLandmarks);
                for (const landmarks of results.multiHandLandmarks) {
                    drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
                        { color: '#00FF00', lineWidth: 5 });
                    drawLandmarks(canvasCtx, landmarks, { color: '#FF0000', lineWidth: 2 });
                }
            }
            canvasCtx.restore();
        }

        const hands = new Hands({
            locateFile: (file) => {
                return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
            }
        });
        hands.setOptions({
            maxNumHands: 2,
            modelComplexity: 1,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        hands.onResults(onResults);

        const camera = new Camera(videoElement, {
            onFrame: async () => {
                await hands.send({ image: videoElement });
            },
            // width: 1280,
            // height: 720
        });
        camera.start();
    </script>
</body>

</html>